<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Socket链接测试</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<div id="myApp">
	<input v-model="subMsg"/>
	<button @click="subData">提交</button>
	<h2>接收到的消息</h2>
	<p v-for="i in list">{{i}}</p>
	<br>
</div>


<script type="text/javascript">

	var baseURL = getRootUrl() + "/";
	
	function getRootUrl() {
		var path = window.location.pathname.substring(1);
		var root = (path == '') ? '' : path.substring(0, path.indexOf('/'));
		return window.location.protocol + '//' + window.location.host + '/' + root;
	}
	
	var socke=null;
	
	//	获取地址栏请求参数
	function getParam(name){
		// 用该属性获取页面 URL 地址从问号 (?) 开始的 URL（查询部分）
		var url = window.location.search;
		// 正则筛选地址栏
		var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		// 匹配目标参数
		var result = url.substr(1).match(reg);
		//返回参数值
		return result ? decodeURIComponent(result[2]) : null;
	}
	
	//	生成随机token
	function randomString(len) {
	　　len = len || 32;
	　　var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
	　　var maxPos = $chars.length;
	　　var pwd = '';
	　　for (i = 0; i < len; i++) {
	　　　　pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
	　　}
	　　return pwd;
	}
	
	
	var vm = new Vue({
		el: "#myApp",
		data(){
			return {
				subMsg:null,
				list:[]
			}
		},
		mounted(){
			if (typeof (WebSocket) == "undefined") {
		        console.log("遗憾：您的浏览器不支持WebSocket");
		    } else {
		    	console.log("恭喜：您的浏览器支持WebSocket");

		    	var that = this;
		        //	实现化WebSocket对象
		        //	指定要连接的服务器地址与端口建立连接
		        //	注意ws、wss使用不同的端口。我使用自签名的证书测试，
		        //	无法使用wss，浏览器打开WebSocket时报错
		        //	ws对应http、wss对应https。
		        
		        //	用户登录标识
		        var token = getParam("token");
		        if(!token) token= randomString(8);
		        
		        var path = baseURL + "socket/" + token;
		        //var path = "http://localhost:8080/socket/" + token;
		        path = path.replace("http","ws");
		        socket = new WebSocket(path);
		        socket.onopen = function() {
		            console.log("Socket 已打开");
		            socket.send("消息发送测试(From Client)");
		        };
		        
		      	//	收到消息事件
		        socket.onmessage = function(msg) {
		            console.log(msg);
		            that.list.push(msg.data);
		        };
		        
		      	//	连接关闭事件
		        socket.onclose = function() {
		            console.log("Socket已关闭");
		        };
		        //	发生了错误事件
		        socket.onerror = function() {
		            alert("Socket发生了错误");
		        }

		        //	窗口关闭时，关闭连接
		        window.unload=function() {
		            socket.close();
		        };
		        
		    }
		},
		methods: {
			subData() {
				vm.sendMsg(vm.subMsg);
			},
			sendMsg(data) {//	发送消息
				socket.send(data);
			}
		}
	});
</script>

</body>
</html>